<template>
  <el-dialog
    :model-value="visible"
    :title="title"
    width="600px"
    @update:model-value="handleUpdateDialogVisible"
    @close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="
      !isScanning &&
      !isGeneratingReport &&
      !(showScanProgress && scanProgress < 100)
    "
  >
    <div class="review-dialog-content">
      <div class="review-result">
        <div class="review-label">复核结果:</div>
        <el-radio-group v-model="reviewResultModel" class="radio-group">
          <el-radio label="pending">待定</el-radio>
          <el-radio label="approved">通过</el-radio>
          <el-radio label="rejected">驳回</el-radio>
        </el-radio-group>
      </div>

      <div class="review-opinion">
        <div class="review-label">复核意见:</div>
        <el-input
          type="textarea"
          v-model="reviewOpinionModel"
          :rows="4"
          placeholder="请输入复核意见..."
          class="opinion-input"
          :show-word-limit="true"
          :maxlength="500"
        />
      </div>

      <div class="review-options">
        <el-checkbox v-model="autoScanModel" class="option-checkbox"
          >提交后自动触发漏洞扫描</el-checkbox
        >
        <el-checkbox v-model="generateReportModel" class="option-checkbox"
          >生成扫描报告</el-checkbox
        >
      </div>

      <!-- 扫描进度 -->
      <div v-if="showScanProgress" class="scan-progress-section">
        <h4 class="scan-progress-title">📊 扫描进度</h4>
        <el-progress :percentage="scanProgress" class="progress-bar" />
        <div class="progress-info">
          <span>状态: {{ scanStatus }}</span>
          <span>预计完成: {{ estimatedCompletion }}</span>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button
        type="primary"
        @click="handleSubmit"
        :disabled="isScanning || isGeneratingReport"
        :loading="loading"
      >
        提交复核
      </el-button>
      <el-button
        @click="handleClose"
        :disabled="isScanning || isGeneratingReport"
      >
        取消
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, computed, ref, watch } from "vue";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  title: {
    type: String,
    required: true,
    default: "复核操作",
  },
  isBatch: {
    type: Boolean,
    default: false,
  },
  reviewResult: {
    type: String,
    default: "pending",
  },
  reviewOpinion: {
    type: String,
    default: "",
  },
  autoScan: {
    type: Boolean,
    default: true,
  },
  generateReport: {
    type: Boolean,
    default: true,
  },
  showScanProgress: {
    type: Boolean,
    default: false,
  },
  scanProgress: {
    type: Number,
    default: 0,
  },
  scanStatus: {
    type: String,
    default: "等待扫描...",
  },
  estimatedCompletion: {
    type: String,
    default: "",
  },
  isScanning: {
    type: Boolean,
    default: false,
  },
  isGeneratingReport: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits<{
  (e: "submit"): void;
  (e: "close"): void;
  (e: "update:visible", value: boolean): void;
  (e: "update:reviewResult", value: string): void;
  (e: "update:reviewOpinion", value: string): void;
  (e: "update:autoScan", value: boolean): void;
  (e: "update:generateReport", value: boolean): void;
}>();

// 使用本地 ref 来存储可编辑的值
const localReviewResult = ref(props.reviewResult);
const localReviewOpinion = ref(props.reviewOpinion);
const localAutoScan = ref(props.autoScan);
const localGenerateReport = ref(props.generateReport);

// 同步 props 变化到本地 ref
watch(
  () => props.reviewResult,
  (val) => {
    localReviewResult.value = val;
  }
);
watch(
  () => props.reviewOpinion,
  (val) => {
    localReviewOpinion.value = val;
  }
);
watch(
  () => props.autoScan,
  (val) => {
    localAutoScan.value = val;
  }
);
watch(
  () => props.generateReport,
  (val) => {
    localGenerateReport.value = val;
  }
);

// 使用 computed 来处理双向绑定
const reviewResultModel = computed({
  get: () => localReviewResult.value,
  set: (val) => {
    localReviewResult.value = val;
    emit("update:reviewResult", val);
  },
});

const reviewOpinionModel = computed({
  get: () => localReviewOpinion.value,
  set: (val) => {
    localReviewOpinion.value = val;
    emit("update:reviewOpinion", val);
  },
});

const autoScanModel = computed({
  get: () => localAutoScan.value,
  set: (val) => {
    localAutoScan.value = val;
    emit("update:autoScan", val);
  },
});

const generateReportModel = computed({
  get: () => localGenerateReport.value,
  set: (val) => {
    localGenerateReport.value = val;
    emit("update:generateReport", val);
  },
});

// 更新 visible 状态
const handleUpdateVisible = (value: boolean) => {
  emit("update:visible", value);
};

// 处理对话框 visible 更新（带检查）
const handleUpdateDialogVisible = (value: boolean) => {
  // 如果要关闭对话框，先检查是否可以关闭
  if (!value) {
    // 如果正在扫描，不允许关闭
    if (props.isScanning) {
      return;
    }
    // 如果正在生成报告，不允许关闭
    if (props.isGeneratingReport) {
      return;
    }
    // 如果显示了扫描进度且扫描未完成，不允许关闭
    if (props.showScanProgress && props.scanProgress < 100) {
      return;
    }
  }
  emit("update:visible", value);
};

// 提交复核
const handleSubmit = () => {
  emit("submit");
};

// 关闭弹窗
const handleClose = () => {
  // 如果正在扫描，不允许关闭
  if (props.isScanning) {
    return;
  }
  // 如果正在生成报告，不允许关闭
  if (props.isGeneratingReport) {
    return;
  }
  // 如果显示了扫描进度且扫描未完成，不允许关闭
  if (props.showScanProgress && props.scanProgress < 100) {
    return;
  }
  emit("close");
};
</script>

<style scoped lang="scss">
.review-dialog-content {
  padding: 10px 0;
}

.review-result {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.review-label {
  width: 100px;
  color: #666;
  flex-shrink: 0;
  font-weight: 500;
  margin-bottom: 8px;
}

.radio-group {
  flex: 1;
  display: flex;
  gap: 20px;
}

.review-opinion {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.opinion-input {
  width: 100%;
}

.review-options {
  margin-bottom: 20px;
}

.option-checkbox {
  margin-right: 20px;
  margin-bottom: 10px;
}

.scan-progress-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.scan-progress-title {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 10px 0;
  color: #555;
}

.progress-bar {
  margin-bottom: 10px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 14px;
}
</style>
